<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布</title>
    <style>
        #ljybox1{
            width: 100%;
            height: 50px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
        }
        #ljybox1 span{
            font-size: large;
            left: 70%;
        }
        #ljybox2{
            width: 100%;
            height: 2200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            top: 60px;
        }
        .ljyleft{
            width: 208px;
            height: 1200px;
            background-color: white;
            position: fixed;
            top: 60px;
            left: 0;
        }
        .ljyright{
            width: 1800px;
            position: fixed;
            justify-content: space-around;
            align-items: center;
            top: 60px;
            left: 208px;
        }
        .icon-xiaohongshu {
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
            margin-top: 0px;
        }
/***************下拉菜单************/
        .text{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin-left: auto; /* 自动外边距将元素推到最右边 */
            margin-right: 100px;
        }
        .dropbtn {
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 下拉按钮悬停效果 */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980b9;
        }
        /* 下拉内容容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }   
        /* 下拉内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            margin-left: 20px;
            margin-top: 170px;
            box-shadow: 0px 8px 16px 0px rgba(227, 217, 217, 0.2);
            z-index: 10;
        }
        /* 下拉内容中的链接样式 */
        .dropdown-content a {  
            background-color: rgb(209, 209, 209);
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            margin-top: -70px;
        }
        /* 下拉内容中的链接悬停效果 */
        .dropdown-content a:hover {background-color: #f1f1f1}
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
/***********left**************/
            .issue {
            width: 150px;
            height: 30px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-radius: 10px;
            background-color: rgb(255, 67, 67);
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-top: 10px;
            margin-left: 15px;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        ul {
            width: 200px;
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 15px;
            cursor: pointer;
        }
        .submenu {
            display: none;
            list-style-type: none;
            padding: 0;
            margin-left: 20px;
            color: #000;
        }
        .submenu li {
            padding: 10px;
        }
        .p {
            padding: 15px;
            cursor: pointer;
        }    
        li:hover {
            color: red;
        }
/*************图标*******************/
        .icon-tubiao- {
            width: 50px;
            height: 15px;
            fill: currentColor;
            overflow: hidden;
            z-index: 1;
            margin-left: 50px;
        }

/***********三核*************/
        .ljyright{
            width: 100%;
            height: 1000px;
            position: fixed;
            justify-content: space-around;
            align-items: center;
            top: 60px;
            left: 208px;
            background-color: white;
        }
        .container{
            width: 1450px;
            height: 850px;
            background-color: white;
            margin-left: 20px;
            margin-top: 20px;
        }
       .header{
            width: 1450px;
            height: 100px;
            color: #a4a1a1;
            background-color: white;
            margin-top: 20px;
            display: flex;
            border-bottom: 1px solid rgb(223, 218, 218);
       }
       .active{
            width: 200px;
            height: 60px;
            background-color: white;
            margin-left: 20px;
            margin-top: 20px;
            transition: background-color 0.3s;
            cursor: pointer;
       }
       .active:active{
            background-color: #e0e0e0;
       }
       .content{
            width: 1400px;
            height: 550px;
            background-color: rgb(241, 239, 239);
            margin-left: 20px;
            margin-top: 20px;
            display: none;
            border: 1px solid rgb(223, 218, 218);
       }
       .content:hover{
            border: dashed 2px #3502ff;
       }
       .active:hover{
            color: black;
       }
       .issue-con {
            width: 140px;
            height: 30px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-radius: 10px;
            background-color: rgb(255, 67, 67);
            color: white;
            size: 16px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-top: 10px;
            margin-left: 600px;
        }
        .content span{
            font-size: 20px;
            display: flex;
            margin-left: 570px;
            margin-top: 300px;
        }
/**********tip**********/
        .wrapper{
            width: 1450px;
            height: 140px;
            background-color: rgb(255, 255, 255);
            margin-top: -160px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
       .tip{
            width: 200px;
            height: 100px;
            background-color: rgb(255, 255, 255);
            margin-left: 20px;
            margin-top: 20px;
            display: flex;
            align-items: center; /* 垂直居中内容 */
            justify-content: center; /* 水平居中内容 */
       }
       .tip p1 {
            font-size: 16px; 
            font-weight: bold; /* 使字体加粗 */
            color: #333;
            margin-bottom: 4px;
        }

        .tip p2 {
            font-size: 14px; 
            color: #666; 
            line-height: 1.5; 
        }
    </style>
</head>
<body>
    <div id="ljybox1">
            <svg class="icon-xiaohongshu" aria-hidden="true">
                <use xlink:href="#icon-xiaohongshu"></use>
              </svg>
            <span>创作服务平台</span>
            <div class="text">
                <span onclick="toggleDropdown()">用户名</span>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#">退出登录</a>
                </div>
            </div>
    </div>
    <div id="ljybox2">
        <div class="ljyleft">
            <div class="issue">
                <p>发布笔记</p>
            </div>
            <ul>
                <li>首页</li>
                <li>笔记管理</li>
                <li class="menu-item" onclick="toggleSubMenu(this)">数据看板
                    <svg class="icon-tubiao-" aria-hidden="true">
                        <use xlink:href="#icon-tubiao-"></use>
                      </svg>
                    <ul id="data-dashboard-submenu" class="submenu">
                        <li>账号浏览</li>
                        <li>内容分析</li>
                        <li>粉丝数据</li>
                    </ul>
                </li>
                <li>活动内容</li>
                <li>笔记灵感</li>
                <li>创作学院</li>
                <li>创作百科</li>
                <!-- Add more items as needed -->
            </ul>
        </div>
        <div class="ljyright">
            <div class="container">
                <div class="header">
                    <div class="active" onclick="toggleContent('imageContent')">
                        <p>上传图片</p>
                    </div>
                    <div class="active"  onclick="toggleContent('videoContent')">
                        <p>上传视频</p>
                    </div>
                </div>
                <div id="imageContent" class="content">
                    <span>这里是上传照片的内容区域。</span>
                    <div class="issue-con">
                        <p>上传图片</p>
                    </div>
                </div>
                <div id="videoContent" class="content">
                    <span>这里是上传视频的内容区域。</span>
                    <div class="issue-con">
                        <p>上传视频</p>
                    </div>
                </div>
            </div>
            <div class="wrapper">
                <div class="tip">
                    <p1>视频大小</p>
                    <p2>支持时长60分钟以内,最大20GB的视频文件</p>
                </div>
                <div class="tip">
                    <p1>视频格式</p>
                    <p2>支持常用视频格式，推荐使用mp4、mov</p>
                </div>
                <div class="tip">
                    <p1>视频分辨率</p>
                    <p2>推荐上传720P（1280*720）及以上视频，超过1080P的视频用网页端上传画质更清晰</p>
                </div>
            </div>
        </div>
    </div>
    <script>// 点击按钮时切换内容
        function toggleContent(contentId) {
            // 隐藏所有内容区域
            var contents = document.getElementsByClassName('content');
            for (var i = 0; i < contents.length; i++) {
                contents[i].style.display = 'none';
            }
            // 显示被点击的内容区域
            var contentToShow = document.getElementById(contentId);
            contentToShow.style.display = 'block';
        }
        // 默认显示第一个内容区域
        document.addEventListener('DOMContentLoaded', function() {
            toggleContent('imageContent');
});
    </script>

    <script>// 点击下拉菜单按钮时显示或隐藏下拉菜单
        function toggleDropdown() {
        var dropdown = document.getElementById("myDropdown");
        if (dropdown.style.display === "block") {
             dropdown.style.display = "none";
        } 
        else {
            dropdown.style.display = "block";
        }
    }
        // 点击下拉菜单外部时关闭菜单
        window.onclick = function(event) {
        if (!event.target.matches('.text span')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                }
            }
        }
        }
    </script>
    <script>// 点击下拉菜单按钮时显示或隐藏下拉菜单
            function toggleSubMenu(element) {
            var submenu = document.getElementById('data-dashboard-submenu');
            if (submenu.style.display === 'none' || submenu.style.display === '') {
                submenu.style.display = 'block';
            } else {
                submenu.style.display = 'none';
            }
        }
    </script>
    <script src="./iconfont.js"></script>
</body>
</html>